<template>
  <div>
    <el-table ref="multipleTable" :data="change_editAble" tooltip-effect="dark">
         <el-table-column type="selection" width="55" ref="select">
         </el-table-column>
        <el-table-column label="账号" prop="account">
            <template v-slot="{row}">
                    <el-input v-model="row.account" v-if="row.editAble"></el-input>
                    <span v-else>{{row.account}}</span>
            </template>
        </el-table-column>
        <el-table-column label="用户组" prop="userGroup"></el-table-column>
        <el-table-column label="创建时间" prop="ctime"></el-table-column>
        <el-table-column label="操作">
            <template v-slot="{row}">
                    <el-button type="success" @click="sendEdit(row)" v-if="row.editAble">完成</el-button>
                    <el-button type="primary" @click="edit(row)" v-else>编辑</el-button>
                    <el-button type="danger" @click="del(row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
  <div style="margin-top: 20px">
    <el-button type="danger" @click="delTotal()">批量删除</el-button>
    <el-button type="primary" @click="toggleSelection()">取消选择</el-button>
  </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  computed: {
    ...mapState("account", ["multipleSelection"]),
    ...mapGetters("account", ["timeFormart", "change_editAble"])
  },
  methods: {
    ...mapMutations("account", ["update_multipleSelection",'update_ids']),
    ...mapActions("account", ["sync_update_AccountList", "sync_del_Account",'sync_edit_Account','update_deltotal']),
    edit(row) {
      row.editAble = true;
    },
    del(row) {
      this.sync_del_Account(row.id);
    },
    sendEdit(row){
        this.sync_edit_Account(row)
    },
    toggleSelection() {
        this.$refs.multipleTable.clearSelection();
    },
    delTotal(){
      // this.update_ids(this.$refs.multipleTable.selection)
      let ids = JSON.stringify(this.$refs.multipleTable.selection.map(item=>{
        return item.id
      }))
      console.log(ids);
      this.update_deltotal(ids)
    }
  },
  created() {
    this.sync_update_AccountList();
  }
};
</script>

<style scoped>
</style>